<template>
  <div class="index">
    <div
      v-for="(item, n) in indexList"
      :key="item.display"
      :style="{ width: listWidth, height: '50px' }"
      class="index-list"
      :class="{ 'index-list-actived': item.actived }"
      @click="handlerClick(item, n)"
    >
      <h4 v-if="item.display == '进行中'" style="color:#409eff">
        {{ item.count || 0 }}
      </h4>
      <h4 v-else-if="item.display == '已完成'" style="color:#004892 ">
        {{ item.count || 0 }}
      </h4>
      <h4 v-else-if="item.display == '已超期'" style="color:#e60012">
        {{ item.count || 0 }}
      </h4>
      <h4 v-else-if="item.display == '已关闭'" style="color:#000">
        {{ item.count || 0 }}
      </h4>
      <h4 v-else-if="item.display == '未开始'" style="color:#BEBEBE">
        {{ item.count || 0 }}
      </h4>
      <h4 v-else-if="item.display == '预警中'" style="color:#EEAD0E">
        {{ item.count || 0 }}
      </h4>
      <h4 v-else style="color:#000">{{ item.count || 0 }}</h4>
      <p>{{ item.display }}</p>
    </div>
  </div>
</template>

<script>
import Bus from "./../bus";
export default {
  name: "indicator",
  props: ["defaultData"],
  data() {
    return {
      listWidth: "16%",
      act: "",
      indexList: this.defaultData || [],
    };
  },
  mounted() {
    //返回第一个key做默认查询
    Bus.$emit("setStateCondition", this.indexList[0].key || 0);
  },
  methods: {
    handlerClick(checkItem, n) {
      this.indexList = this.indexList.map((item) => {
        item["actived"] = false;
        if (item.key === checkItem.key) {
          item["actived"] = true;
        }
        this.act = n;

        return item;
      });
      Bus.$emit("setStateCondition", checkItem.key);
    },
  },
  watch: {
    defaultData: {
      handler: function(arr) {
        this.indexList = arr;
        if (this.act) {
          this.indexList[0].actived = false;
          this.indexList[this.act].actived = true;
        }
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.index {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.index-list {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  min-width: 80px;

  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}
.index-list + .index-list {
  margin-left: 10px;
}
.index-list > h4 {
  color: #108eeb;
  font-size: 20px;
  padding: 2px;
  font-weight: 400;
}

.index-list-actived {
  background-color: #108eeb;
  border-color: #108eeb;
  text-shadow: 0px 1px 1px #000, 0 0 1px #fff;
}
.index-list-actived > h4,
.index-list-actived > p {
  color: white !important;
}

.index-list > p {
  color: #111;
  font-size: 12px;
}
</style>
